<template>
	<div class="login-conatainer">
		<van-nav-bar @click-left="$router.back()">
			<van-icon slot="left" name="cross" />
		</van-nav-bar>

		<div class="title">
			<div class="top">手机登录</div>
			<p>未注册的手机号验证通过后将自动注册</p>
		</div>

		<van-form
			ref="loginForm"
			validate-first
			:show-error="false"
			:show-error-message="false"
			@submit="onSubmit"
			@failed="onFailed"
		>
			<van-field
				v-model="user.mobile"
				name="mobile"
				label="手机号"
				placeholder="手机号"
				autocomplete="off"
				:rules="rules.mobile"
			/>
			<van-field
				v-model="user.code"
				name="code"
				label="验证码"
				autocomplete="off"
				placeholder="请输入验证码"
				:rules="rules.code"
			>
				<template #button>
					<van-button
						size="mini"
						type="default"
						round
						@click.prevent="sendMsg"
						v-if="!isSend"
						>发送验证码</van-button
					>
					<van-button size="mini" type="default" round v-else disabled>
						<van-count-down
							millisecond
							:time="time"
							format="ss s"
							@finish="isSend = false"
						/>
					</van-button>
				</template>
			</van-field>
			<div style="margin: 10px">
				<van-button
					block
					type="info"
					size="large"
					native-type="submit"
					color="#ec4243"
					>登录</van-button
				>
			</div>
		</van-form>
	</div>
</template>

<script>
import { sendMsg, login } from '@/api/login'
export default {
	data() {
		return {
			user: {
				mobile: '16666666666',
				code: '246810'
			},
			time: 60 * 1000,
			isSend: false,
			rules: {
				mobile: [
					{ required: true, message: '请输入手机号' },
					{
						pattern: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
						message: '手机号格式不正确'
					}
				],
				code: [
					{ required: true, message: '请输入验证码' },
					{ pattern: /^\d{6}$/, message: '验证码有误' }
				]
			}
		}
	},
	methods: {
		// TODO 发送验证码
		async sendMsg() {
			try {
				await this.$refs['loginForm'].validate('mobile')
				this.$toast({
					message: '已发送',
					position: 'top'
				})
				this.isSend = true
				await sendMsg(this.user.mobile)
			} catch (err) {
				this.$toast({
					message: '登录失败,请稍后重试',
					position: 'top'
				})
			}
		},
		// TODO 校验失败
		onFailed(error) {
			this.$toast({
				message: error.errors[0].message,
				position: 'top'
			})
		},
		// TODO 登录
		async onSubmit() {
			this.$toast.loading({
				message: '登录中...',
				forbidClick: true,
				duration: 0
			})
			const { data } = await login(this.user)
			this.$store.commit('user/saveToken', data.token)
			this.$toast.success('登录成功')
			this.$router.push('/my')
		}
	},
	created() {}
}
</script>

<style lang="scss" scoped>
::v-deep .van-nav-bar {
	.van-icon.van-icon-cross {
		color: rgb(78, 78, 78);
	}
}
.title {
	margin: 90px 30px;
	.top {
		padding-left: 100px;
		height: 58px;
		font-size: 40px;
		font-weight: 600;
		letter-spacing: 2px;
		background-image: url(~@/assets/logo.png);
		background-size: contain;
		background-repeat: no-repeat;
	}
	p {
		color: #c6c6c6;
	}
}
::v-deep.van-field__button {
	border: 1px solid red;
}</style
>>
